<template>
  <Dialog 
    :model-value="modelValue" 
    @onClose="onClosed" 
    :title="type === 'add' ? '添加' : '编辑'" 
  >
    <el-form ref="formRef" label-width="120px" :model="formData" :rules="rules">
      <el-form-item label="头像：" prop="avatar">
        <UploadSingleImage v-model="formData.avatar" />
      </el-form-item>
      <el-form-item label="账户名称：" prop="name">
        <el-input v-model="formData.name" placeholder="请填写账户名称" />
      </el-form-item>
      <el-form-item label="真实姓名：" prop="fullname">
        <el-input v-model="formData.fullname" placeholder="请填写真实姓名" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input
          v-model="formData.password"
          type="password"
          placeholder="请填写密码"
        />
      </el-form-item>
      <el-form-item label="状态：" prop="enable">
        <el-radio-group v-model="formData.enable" size="large">
        <el-radio-button :label="true">启用</el-radio-button>
        <el-radio-button :label="false">禁用</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="角色：" prop="role">
        <el-select v-model="formData.role" multiple placeholder="请选择角色">
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onClosed" style="margin-right: 10px;">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup>
import {ref, watch} from 'vue'
import {roles} from '../mock/list'
import {getItem} from '@/utils/local'
import {USER_UPDATE_MODAL} from '@/utils/constant'
import Dialog from '@/components/Dialog'
import UploadSingleImage from '@/components/UploadSingleImage'

// eslint-disable-next-line
const emits = defineEmits(['update:modelValue'])
// eslint-disable-next-line
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: '',
  },
})

const formRef = ref(null)
const formData = ref({
  id: '',
  avatar: '',
  name: '',
  fullname: '',
  password: '',
  enable: true,
  role: []
})
const rules = {
  avatar: [{required: true, message: '请上传头像', trigger: 'blur'}],
  password: [{required: true, message: '请输入密码', trigger: 'blur'}],
  name: [
    {required: true, message: '请输入账户名', trigger: 'blur'},
    {min: 1, max: 5, message: '长度在1 - 5个长度之间', trigger: 'blur'},
  ],
  fullname: [
    {required: true, message: '请输入真实姓名', trigger: 'blur'},
    {min: 1, max: 5, message: '长度在1 - 5个长度之间', trigger: 'blur'},
  ]
}

watch(
  () => props.modelValue,
  () => {
    const type = props.type
    if (type === 'edit') {
      const data = getItem(USER_UPDATE_MODAL)
      if (!Object.keys(data).length) return
      const {avatar, enable, fullname, name, role} = data
      const tform = {
        password: 123456,
        avatar, enable, fullname, name,
        role: role.map(item => item.id)
      }
      formData.value = tform
    } else {
      formData.value = {
        id: '',
        avatar: '',
        name: '',
        fullname: '',
        password: '',
        enable: true,
        role: []
      }
    }
  }
)

function onClosed() {
  emits('update:modelValue', false)
  formRef.value.resetFields()
}
function onConfirm() {
  onClosed()
}
</script>
